Skip to main content

設定Algolia 搜尋功能

這篇文章主要是介紹 Docusaurus blog 中如何設定 Algolia，讓使用者可以快速的在 blog 中快速搜尋自己要的文章。

Blog 本身已部署在 Vercel 上，電腦的作業系統是 mac，後續的介紹都是以 mac 系統設定為主。

安裝套件​

於專案底下安裝 docsearch 。

[Terminal]
npm install @docsearch/react

註冊 Algolia​

先到 Algolia 官方網站 進行註冊並登入，推薦使用 github 登陸比較方便。

登陸後一開始會先要你建立基本訊息，註冊成功會直接來到 index 的建立，這邊的 index 名字蠻重要的，可以先記錄下來。

index name 接著跳轉到首頁 API Keys 的部分，並在 ACL 部分新增下面參數，分別為 addObject、editSettings、deleteIndex，新增完成後就按下 Create。

API Keys

docusaurus.config.js 設定​

開啟 docusaurus.config.js，在 themeConfig 新增一個 algolia 物件，在該物件中需要帶入三個參數。

PS : 這邊的參數設定不要抄我的，記得以自己設定為主。

  • apiKey : Algolia 的 API Key。
  • indexName : Algolia 的 index 名稱。
  • appId : Algolia 的 Application ID。

docusaurus.config.js

環境變數與 Docker 設定爬蟲​

.env file setting​

先到 DOCSEARCH 官網 看要如何新增設定 .env 檔案 ，並且設定你的 Application ID 和 API key 。

Alt text

application key and api id

[.env]
APPLICATION_ID=4J95IF7TX1
API_KEY=b5a8d0af96a1b33bb26fad462ef718c5

config.json file setting​

之後在根目錄再新增一個 json 檔案，名為 config.json，設定如下。

有三個地方需要做更改，分別是：

  • index_name：你的 Algolia index 名稱
  • start_urls：你的 Docusaurus 網址
  • sitemap_urls：你的 Docusaurus 網址的 sitemap
[config.json]
{
    "index_name": "Docusaurus-Algolia",
    "start_urls": ["https://xxxxtim-github-io.vercel.app/"],
    "sitemap_urls": [
      "https://xxxxtim-github-io.vercel.app/sitemap.xml"
    ],
    "sitemap_alternate_links": true,
    "stop_urls": ["/tests"],
    "selectors": {
      "lvl0": {
        "selector": "(//ul[contains(@class,'menu__list')]//a[contains(@class, 'menu__link menu__link--sublist menu__link--active')]/text() | //nav[contains(@class, 'navbar')]//a[contains(@class, 'navbar__link--active')]/text())[last()]",
        "type": "xpath",
        "global": true,
        "default_value": "Documentation"
      },
      "lvl1": "header h1",
      "lvl2": "article h2",
      "lvl3": "article h3",
      "lvl4": "article h4",
      "lvl5": "article h5, article td:first-child",
      "lvl6": "article h6",
      "text": "article p, article li, article td:last-child"
    },
    "strip_chars": " .,;:#",
    "custom_settings": {
      "separatorsToIndex": "_",
      "attributesForFaceting": ["language", "version", "type", "docusaurus_tag"],
      "attributesToRetrieve": [
        "hierarchy",
        "content",
        "anchor",
        "url",
        "url_without_anchor",
        "type"
      ]
    },
    "conversation_id": ["833762294"],
    "nb_hits": 46250
  }

Docker 與 jq 的相關安裝​

首先到 Docker 官網 進行桌面版的安裝，由於我的電腦是 arm 的版本，因此選擇 apple silicon ，安裝完成後並且運行 Docker 。

Alt text

接著安裝 jq (a lightweight command-line JSON processor)

[Terminal]
$ brew install jq

爬取資料並新增至 Algolia​

輸入以下指令並且進行資料爬取。

[Terminal]
docker run -it --env-file=.env -e "CONFIG=$(cat ./config.json | jq -r tostring)" algolia/docsearch-scraper

執行成功的話，會看到 docsearch-scraper 正在爬取我們的網站內容，並將資料新增至 Algolia。

參考資料：​

https://medium.com/@weiyun0912/docusaurus-%E5%9C%A8-docusaurus-%E4%B8%AD%E4%BD%BF%E7%94%A8-algolia-%E5%AF%A6%E4%BD%9C%E6%90%9C%E5%B0%8B%E5%8A%9F%E8%83%BD-4953b6ed4c34

https://docsearch.algolia.com/docs/legacy/run-your-own#integration

https://www.youtube.com/watch?v=lNkVxDSRo7M